﻿@using MY.ShoppingBackstage.Model;
@{
    var brand = ViewBag.brand as List<Brand>;
    var category = ViewBag.category as List<Category>;
    var product = ViewBag.product as Product_Spu;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        * {
            touch-action: pan-y;
        }
    </style>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/layui/layui.js"></script>
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/jquery.dataTables.min.js"></script>
    <script src="~/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script src="~/js/hsCheckData.js" type="text/javascript"></script>

    <title>添加产品</title>
</head>

<body>
    <div class="margin inside_pages clearfix">
        <div class="add_style clearfix relative">
            <!--品牌展示 当通过品牌管理添加产品是显示该-->
            <div class="Brand_title">
                <div class="Brand_img">
                    <select id="brandQuery" onchange="Bangding()">
                        <option>-选择品牌-</option>
                        @foreach (var item in brand)
                        {
                            if (product.BrandId == item.Id)
                            {
                                <option value="@item.Id" selected="selected">@item.Name</option>
                            }
                            else
                            {
                                <optkion value="@item.Id">@item.Name</optkion>

                            }
                        }
                    </select>
                </div>
            </div>
            <ul>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>商品名称：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <input id="id" value="@product.Id" type="hidden" />
                        <input name="" type="text" class="col-xs-6" id="Name" value="@product.Name" />
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>商品编码：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <input name="" type="text" class="col-xs-4" id="Code" value="@product.Code" />
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>选择分类：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <select id="One_Category_Id">
                            <option value="0">-请选择-</option>
                            @foreach (var item in category.Where(a => a.CategoryLevel == 1))
                            {
                                if (item.Id == product.One_Category_Id)
                                {
                                    <option value="@item.Id">@item.Name</option>

                                }
                                else
                                {
                                    <option value="@item.Id" selected=selected>@item.Name</option>
                                }
                            }
                        </select>
                        <select id="Two_Category_Id">
                            <option value="0">-请选择-</option>
                            @foreach (var item in category.Where(a => a.CategoryLevel == 2))
                            {
                                if (item.Id == product.Two_Category_Id)
                                {
                                    <option value="@item.Id" class="@item.ParentId" selected=selected>@item.Name</option>

                                }
                                else
                                {
                                    <option value="@item.Id" class="@item.ParentId">@item.Name</option>

                                }
                            }
                        </select>
                        <select id="Three_Category_Id">
                            <option value="0">-请选择-</option>
                            @foreach (var item in category.Where(a => a.CategoryLevel == 3))
                            {
                                if (item.Id == product.Three_Category_Id)
                                {
                                    <option value="@item.Id" class="@item.ParentId" selected=selected>@item.Name</option>

                                }
                                else
                                {
                                    <option value="@item.Id" class="@item.ParentId">@item.Name</option>

                                }
                            }
                        </select>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1">设置时间：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <div class="Date_selection">
                            <span class="label_name">生产日期：</span>
                            <p class="laydate-icon" id="start" style="width:200px; margin-right:10px; height:30px; line-height:30px; float:left"></p>
                            <span class="label_name">商品有效期：</span>
                            <p class="laydate-icon" id="end" style="width:200px;height:30px; line-height:30px; float:left"></p>
                        </div>
                    </div>
                </li>

                <li class="clearfix">
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3"><i>*</i>商品价格：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            <input name="" type="text" class="col-xs-7" id="Price" value="@product.Price" /><em class="Prompt">元</em>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3"><i>*</i>商品重量：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            <input name="" id="Weight" type="text" class="col-xs-7" value="@product.Weight" /><em class="Prompt">克</em>
                        </div>
                    </div>
                    @*<div class="col-xs-4">
                            <label class="label_name col-xs-3"><i>*</i>商品总数量：&nbsp;&nbsp;</label>
                            <div class="Add_content col-xs-9">
                                <input name="" type="text" class="col-xs-7" /><em class="Prompt">件</em>
                            </div>
                        </div>*@
                </li>

                <li class="clearfix">
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3">是否上架：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            @if (product.Publish_Status == 1)
                            {
                                <label><input type="radio" name="publish_Status" value="1" class="ace" checked="checked" /><span class="lbl">是</span></label>
                                <label><input type="radio" name="publish_Status" value="0" class="ace" /><span class="lbl">否</span></label>
                            }
                            else
                            {
                                <label><input type="radio" name="publish_Status" value="1" class="ace" /><span class="lbl">是</span></label>
                                <label><input type="radio" name="publish_Status" value="0" class="ace" checked="checked" /><span class="lbl">否</span></label>
                            }
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3">审核状态：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            <label class="l_f checkbox_time">
                                @if (product.Audit_Status == 1)
                                {
                                    <input type="checkbox" name="checkbox" id="Audit_Status" class="ace" checked="checked" />

                                }
                                else
                                {
                                    <input type="checkbox" name="checkbox" id="Audit_Status" class="ace" />
                                }
                                <span class="lbl">已审核</span>
                            </label>
                        </div>
                    </div>
                </li>

                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>设置规格：&nbsp;&nbsp;</label>
                    <div class="control-group">
                        <label class="control-label"> </label>
                        <div class="controls">
                            <button id="add_lv1" class="btn btn-success btn-primary" type="button">添加规格项</button>
                            <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
                        </div>
                    </div>
                    <div id="lv_table_con" class="control-group" style="display: none;">
                        <label class="control-label">规格项目表</label>
                        <div class="controls">
                            <div id="lv_table">

                            </div>
                        </div>
                    </div>

                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>内容介绍：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <textarea id="Descript" style="width:500px;height:200px">@product.Descript
                        </textarea>
                    </div>
                </li>
            </ul>
            <div class="Button_operation btn_width">
                <button class="btn button_btn bg-deep-blue" onclick="ProdSubmit()" type="button">保存并提交</button>
                <button class="btn button_btn bg-gray" type="button">取消添加</button>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    //根据不同品牌显示不同图标
    function Bangding() {
        $(".Brand_img img").remove();
        var brandleId = $("#brandQuery").val();
        if (brandleId == 0) {
            return;
        }
        $.ajax({
            url: "/Commodity/ShowImg?Id=" + brandleId,
            type: "post",
            dataType: "json",
            success: function (result) {
                $(".Brand_img").prepend("<img src='" + result.Info + "' width='60' height='60' />");
            }
        })
    }
</script>
<script>



    //回车事件绑定
    $('.huiche').on('keydown', function (event) {
        if (event.keyCode == 13) {
            var name = ".add_column1"
            col(name);
        }
    });

    /*checkbox激发事件*/
    $('#checkbox').on('click', function () {
        if ($('input[name="checkbox"]').prop("checked")) {
            $('.Date_selection ').css('display', 'block');
        }
        else {

            $('.Date_selection').css('display', 'none');
        }
    });

    /******时间设置*******/
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
    /*********滚动事件*********/
    $("body").niceScroll({
        cursorcolor: "#888888",
        cursoropacitymax: 1,
        touchbehavior: false,
        cursorwidth: "5px",
        cursorborder: "0",
        cursorborderradius: "5px"
    });
</script>
<script>
    var lv1HTML = '<div class="control-group lv1">' +
        '<label class="control-label">规格名称</label>' +
        '<div class="controls">' +
        '<input type="text" name="lv1" placeholder="规格名称">' +
        '<button class="btn  btn-primary add_lv2" type="button">添加值</button>' +
        '<button class="btn btn-del remove_lv1" type="button">删除值</button>' +
        '</div>' +
        '<div class="controls lv2s"></div>' +
        '</div>';
    var lv2HTML = '<div style="margin-top: 5px;">' +
        '<input type="text" name="lv2" placeholder="值">' +
        '<button class="btn btn-del remove_lv2" type="button">删除值</button>' +
        '</div>';
    //添加新规格
    $(document).ready(function () {
        $('#add_lv1').on('click', function () {
            var last = $('.control-group.lv1:last');
            if (!last || last.length == 0) {
                $(this).parents('.control-group').eq(0).after(lv1HTML);
            } else {
                last.after(lv1HTML);
            }
        });
        //删除规格
        $(document).on('click', '.remove_lv1', function () {
            $(this).parents('.lv1').remove();
        });
        //添加规格参数
        $(document).on('click', '.add_lv2', function () {
            $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
        });
        //删除规格产数
        $(document).on('click', '.remove_lv2', function () {
            $(this).parent().remove();
        });
        //添加规格table表
        $('#update_table').on('click', function () {

            var lv1Arr = $('input[name="lv1"]');//获取规格名称

            if (!lv1Arr || lv1Arr.length == 0) {
                $('#lv_table_con').hide();
                $('#lv_table').html('');
                return;
            }
            var result = [];//specs集合
            for (var i = 0; i < lv1Arr.length; i++) {
                var Specs = {}//一个对象specs
                var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');//获取规格值
                if (!lv2Arr || lv2Arr.length == 0) {
                    layer.msg('请先删除无值的规格项！');
                    return;
                }
                var valList = [];//val集合
                for (var j = 0; j < lv2Arr.length; j++) {
                    var val = {}//一个对象specs
                    val.Spec_value1 = $(lv2Arr[j]).val();
                    valList.push(val);
                }
                Specs.Spec_Name = $(lv1Arr[i]).val();
                Specs.specValues = valList;
                result.push(Specs);
            }
            //数据库添加规格名和规格值

            var tableHTML = '';
            tableHTML += '<table class="table table-bordered" style="width:50%">';
            tableHTML += '    <thead>';
            tableHTML += '        <tr>';
            for (var i = 0; i < result.length; i++) {
                tableHTML += '<th style="width:90px;text-align:center;" class="' + result[i].Id + '">' + result[i].Spec_Name + '</th>';
                tableHTML += '            <th style="width:90px;text-align:center;">库存</th>';
            }
            tableHTML += '        </tr>';
            tableHTML += '    </thead>';
            tableHTML += '    <tbody>';
            var numsArr = [];
            var rowsArr = [];
            for (var i = 0; i < result.length; i++) {
                numsArr.push(result[i].specValues.length);
            }
            var len = 1;
            for (var i = 0; i < numsArr.length; i++) {
                len = len * numsArr[i];
                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                    tmpnum = tmpnum * numsArr[j];
                }
                rowsArr.push(tmpnum);
            }


            for (var i = 0; i < len; i++) {
                tableHTML += '<tr>';

                for (var j = 0; j < result.length; j++) {
                    var slength = result[j].specValues.length;
                    if (i < slength) {

                        tableHTML += '<td width="20px">' + result[j].specValues[i].Spec_value1 + '</td>';
                        tableHTML += '<td width="20px" ><input type="text" name="num' + j + '" /></td>';
                    }

                }
                tableHTML += '</tr>';
            }
            tableHTML += '</tbody>';
            tableHTML += '</table>';

            $('#lv_table_con').show();
            $('#lv_table').html(tableHTML);

        });
    });

    //分类下拉框改变时
    $("#One_Category_Id").change(function () {
        $("#Two_Category_Id").val(0);
        $("#Three_Category_Id").val(0);
        $("#Two_Category_Id option[class!=" + $(this).val() + "]").hide();
        $("#Two_Category_Id option[class=" + $(this).val() + "]").show();
    })
    $("#Two_Category_Id").change(function () {
        $("#Three_Category_Id").val(0);
        $("#Three_Category_Id option[class!=" + $(this).val() + "]").hide();
        $("#Three_Category_Id option[class=" + $(this).val() + "]").show();
    })

    //提交按钮事件
    function ProdSubmit() {
        var product_Spu = {};
        product_Spu.Id = $("#id").val();
        product_Spu.Name = $("#Name").val();
        product_Spu.Code = $("#Code").val();
        product_Spu.BrandId = $("#brandQuery").val();
        if ($("#One_Category_Id").val() == 0 || $("#Two_Category_Id").val() == 0 || $("#Three_Category_Id").val() == 0) {
            layer.msg("请选择分类");
            return;
        }

        product_Spu.One_Category_Id = $("#One_Category_Id").val();
        product_Spu.Two_Category_Id = $("#Two_Category_Id").val();
        product_Spu.Three_Category_Id = $("#Three_Category_Id").val();
        product_Spu.Price = $("#Price").val();
        product_Spu.Publish_Status = $('input:radio[name="publish_Status"]:checked').val();
        var Audit_Status = 0;
        if ($("input[type='checkbox']").is(':checked')) {
            Audit_Status = 1;
        }
        product_Spu.Audit_Status = Audit_Status;
        product_Spu.Weight = $("#Weight").val();
        product_Spu.Production_Date = $("#start").text();
        product_Spu.Shelf_Life = $("#end").text();
        product_Spu.Descript = $("#Descript").text();

        var list = [];//specs集合

        var SVList = [];//specvalues集合
        var SpecValues = {};//值对象


        var lv1Arr = $('input[name="lv1"]');//获取规格名称

        if (!lv1Arr || lv1Arr.length == 0) {
            $('#lv_table_con').hide();
            $('#lv_table').html('');
            return;
        }
        for (var i = 0; i < lv1Arr.length; i++) {
            var Specs = {}//一个对象specs
            var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');//获取规格值
            if (!lv2Arr || lv2Arr.length == 0) {
                layer.msg('请先删除无值的规格项！');
                return;
            }
            var valList = [];//val集合
            for (var j = 0; j < lv2Arr.length; j++) {
                var val = {}//一个对象specs
                val.name = $(lv2Arr[j]).val();
                val.num = $("input[name=num" + j + "]").val();
                valList.push(val);
            }
            Specs.Spec_Name = $(lv1Arr[i]).val();
            Specs.specValues = valList;
            SVList.push(Specs);
        }

        $.ajax({
            type: "post",
            url: "/Commodity/AddProduct",
            data: { product_Spu: product_Spu, Specs: JSON.stringify(SVList) },
            dataType: 'json',
            success: function (result) {
                if (result.Success) {
                    layer.msg("新增成功");
                    location.href = "/Commodity/Products";
                } else {
                    layer.msg("新增失败");
                }
            }
        })

    }
</script>



